<template>
  <div class="talent-category-container">
    <!-- 主体内容 -->
    <main class="content-wrapper">
      <!-- 返回按钮 -->
      <div class="back-section">
        <router-link to="/faculty" class="back-link">
          <span class="back-icon">←</span>
          <span>返回师资力量</span>
        </router-link>
      </div>

      <!-- 页面标题 -->
      <div class="page-header">
        <h1>{{ categoryTitle }}</h1>
        <p>{{ categoryDescription }}</p>
      </div>

      <!-- 人才列表 -->
      <div class="talent-list">
        <div 
          v-for="person in talentList" 
          :key="person.id" 
          class="talent-card"
          @click="showPersonDetail(person)"
        >
          <img :src="person.photo" alt="{{ person.name }}" class="talent-photo">
          <div class="talent-info">
            <h3 class="talent-name">{{ person.name }}</h3>
            <p class="talent-position">{{ person.title }}</p>
            <p class="talent-department">{{ person.department }}</p>
            <p class="talent-research">{{ person.researchArea }}</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

// 页面数据
const categoryTitle = ref('');
const categoryDescription = ref('');
const talentList = ref([]);

// 模拟的人才数据
const talentDataMap = {
  // 院士类数据
  'academician': {
    '中国科学院院士': {
      title: '中国科学院院士',
      description: '山河大学中国科学院院士名单',
      data: [
        { id: 101, name: '张三', title: '中国科学院院士', department: '物理学院', researchArea: '凝聚态物理、量子计算', photo: '/path/to/photo101.jpg' },
        { id: 102, name: '刘教授', title: '中国科学院院士', department: '化学学院', researchArea: '有机化学、催化', photo: '/path/to/photo102.jpg' },
        { id: 103, name: '王院士', title: '中国科学院院士', department: '生命科学学院', researchArea: '分子生物学', photo: '/path/to/photo103.jpg' },
        { id: 104, name: '陈教授', title: '中国科学院院士', department: '计算机科学与技术学院', researchArea: '人工智能、大数据', photo: '/path/to/photo104.jpg' },
        { id: 105, name: '李院士', title: '中国科学院院士', department: '数学学院', researchArea: '应用数学', photo: '/path/to/photo105.jpg' }
      ]
    },
    '中国工程院院士': {
      title: '中国工程院院士',
      description: '山河大学中国工程院院士名单',
      data: [
        { id: 201, name: '张院士', title: '中国工程院院士', department: '工程学院', researchArea: '机械工程', photo: '/path/to/photo201.jpg' },
        { id: 202, name: '赵教授', title: '中国工程院院士', department: '材料科学与工程学院', researchArea: '新型材料', photo: '/path/to/photo202.jpg' }
      ]
    },
    '海外院士': {
      title: '海外院士',
      description: '山河大学海外院士名单',
      data: [
        { id: 301, name: 'John Smith', title: '美国科学院院士', department: '医学院', researchArea: '免疫学', photo: '/path/to/photo301.jpg' },
        { id: 302, name: 'David Brown', title: '美国科学院院士', department: '环境科学与工程学院', researchArea: '气候变化', photo: '/path/to/photo302.jpg' },
        { id: 303, name: 'Maria Garcia', title: '欧洲科学院院士', department: '经济学院', researchArea: '金融学', photo: '/path/to/photo303.jpg' },
        { id: 304, name: 'Hans Müller', title: '欧洲科学院院士', department: '地球科学学院', researchArea: '地质学', photo: '/path/to/photo304.jpg' },
        { id: 305, name: 'Takashi Tanaka', title: '欧洲科学院院士', department: '电子工程学院', researchArea: '通信技术', photo: '/path/to/photo305.jpg' }
      ]
    }
  },
  // 国家级人才计划入选者数据
  'national': {
    '国家自然科学基金杰出青年基金获得者': {
      title: '国家自然科学基金杰出青年基金获得者',
      description: '山河大学国家自然科学基金杰出青年基金获得者名单',
      data: [
        { id: 401, name: '孙教授', title: '国家杰出青年基金获得者', department: '物理学院', researchArea: '量子信息', photo: '/path/to/photo401.jpg' },
        { id: 402, name: '周博士', title: '国家杰出青年基金获得者', department: '化学学院', researchArea: '纳米科学', photo: '/path/to/photo402.jpg' }
      ]
    },
    '长江学者特聘教授': {
      title: '长江学者特聘教授',
      description: '山河大学长江学者特聘教授名单',
      data: [
        { id: 501, name: '李四', title: '长江学者特聘教授', department: '计算机科学与技术学院', researchArea: '人工智能、机器学习', photo: '/path/to/photo2.jpg' },
        { id: 502, name: '吴教授', title: '长江学者特聘教授', department: '生命科学学院', researchArea: '神经科学', photo: '/path/to/photo502.jpg' }
      ]
    }
  }
};

// 加载人才数据
const loadTalentData = () => {
  const categoryType = route.query.categoryType;
  const categoryName = route.query.categoryName;
  
  if (talentDataMap[categoryType] && talentDataMap[categoryType][categoryName]) {
    const data = talentDataMap[categoryType][categoryName];
    categoryTitle.value = data.title;
    categoryDescription.value = data.description;
    talentList.value = data.data;
  } else {
    categoryTitle.value = '人才列表';
    categoryDescription.value = '未找到相关人才数据';
    talentList.value = [];
  }
};

// 显示人才详情
const showPersonDetail = (person) => {
  router.push({
    path: '/facultyDetail',
    query: {
      name: person.name,
      title: person.title
    }
  });
};

// 组件挂载时加载数据
onMounted(() => {
  loadTalentData();
});
</script>

<style scoped>
/* 主容器样式 */
.talent-category-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

/* 内容区域样式 */
.content-wrapper {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
  width: 100%;
}

/* 返回链接样式 */
.back-section {
  margin-bottom: 20px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  color: #3498db;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s ease;
}

.back-link:hover {
  color: #2980b9;
}

.back-icon {
  margin-right: 8px;
  font-size: 18px;
}

/* 页面标题样式 */
.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 32px;
  color: #2c3e50;
  margin-bottom: 15px;
  font-weight: 700;
}

.page-header p {
  font-size: 18px;
  color: #7f8c8d;
}

/* 人才列表样式 */
.talent-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 24px;
}

/* 人才卡片样式 */
.talent-card {
  display: flex;
  align-items: flex-start;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.talent-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 人才照片样式 */
.talent-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 20px;
  border: 3px solid #ecf0f1;
}

/* 人才信息样式 */
.talent-info {
  flex: 1;
}

.talent-name {
  font-size: 20px;
  color: #2c3e50;
  margin-bottom: 8px;
  font-weight: 600;
}

.talent-position {
  font-size: 16px;
  color: #3498db;
  margin-bottom: 8px;
}

.talent-department {
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 8px;
}

.talent-research {
  font-size: 14px;
  color: #2c3e50;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-wrapper {
    padding: 20px 15px;
  }
  
  .page-header h1 {
    font-size: 28px;
  }
  
  .page-header p {
    font-size: 16px;
  }
  
  .talent-list {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .talent-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
  }
  
  .talent-photo {
    margin-right: 0;
    margin-bottom: 15px;
    width: 80px;
    height: 80px;
  }
}
</style>